<template>
  <scroll-view class="merchant-detail-container" scroll-y>
    <view class="info-section" v-if="merchantInfo.notice">
      <view class="info-header">
        <uni-icons type="notification" size="20" color="#00C853"></uni-icons>
        <text class="section-title">商家公告</text>
      </view>
      <text class="section-content">{{ merchantInfo.notice }}</text>
    </view>
    
    <view class="info-section">
      <view class="info-header">
        <uni-icons type="clock" size="20" color="#00C853"></uni-icons>
        <text class="section-title">营业时间</text>
      </view>
      <text class="section-content">{{ merchantInfo.businessHours }}</text>
    </view>
    
    <view class="info-section">
      <view class="info-header">
        <uni-icons type="location" size="20" color="#00C853"></uni-icons>
        <text class="section-title">商家地址</text>
      </view>
      <text class="section-content">{{ merchantInfo.address }}</text>
    </view>
    
    <view class="info-section" v-if="merchantInfo.phone">
      <view class="info-header">
        <uni-icons type="phone" size="20" color="#00C853"></uni-icons>
        <text class="section-title">商家电话</text>
      </view>
      <text class="section-content contact-phone" @tap="$emit('call-phone')">
        {{ merchantInfo.phone }}
      </text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
interface MerchantInfo {
  notice: string;
  businessHours: string;
  address: string;
  phone: string;
}

interface Props {
  merchantInfo: MerchantInfo;
}

defineProps<Props>();
defineEmits(['call-phone']);
</script>

<style scoped>
.merchant-detail-container {
  height: 100%;
  background-color: #fff;
  padding: 30rpx;
}

.info-section {
  margin-bottom: 40rpx;
  padding-bottom: 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.info-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 10rpx;
  margin-bottom: 15rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
}

.section-content {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

.contact-phone {
  color: #00C853;
  text-decoration: underline;
}
</style>